<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/base::meta"></head>
<style>
    main {
        margin-top: 80px;
        /*
            vh:视口单位是依赖于视口（浏览器界面像素）的尺寸，根据视口尺寸的百分比
            而%单位则是通过父元素的尺寸计算得出，这意味着在内容小于页面时，想要占满页面需要先设置父元素的高度。
            鉴于导航栏存在高度且不包含在main中 此处不设置为100vh。
         */
        min-height: 83vh;
    }
</style>
<body class="bg-light">
<header th:replace="common/base::header"></header>
<main role="main">
    <article class="container">
        <div class="justify-content-center">
            <h3>友情链接</h3>
            <ul>
                <th:block th:each="link : ${links}">
                    <!-- target="_blank"在新窗口打开 -->
                    <li>
                        <span>🔒 </span>
                        <a th:href="${link.linkUrl}" target="_blank" th:text="${link.linkName}"></a>
                        <span class="text-muted" th:text="'-->'+${link.linkDescription}"></span>
                    </li>
                    <br/>
                </th:block>
            </ul>
            <h3>链接须知</h3>
            <blockquote>
                <ul>
                    <li><p>请确定贵站可以稳定运营</p></li>
                    <li><p>原创博客优先，技术类博客优先，设计、视觉类博客优先</p></li>
                    <li><p>经常过来访问和评论，眼熟的</p></li>
                </ul>
            </blockquote>
            <h3>基本信息</h3>
            <blockquote>
                <ul>
                    <li><p th:text="'网站名称：'+${options.siteTitle}"></p></li>
                    <li><p th:text="'网站地址：'+${options.siteIndexUrl}"></p></li>
                </ul>
            </blockquote>
            <p>暂时先这样，同时欢迎互换友链 ^_^</p>
            <p>还有，我会不定时对无法访问的网址进行清理，请保证自己的链接长期有效</p>
        </div>
    </article>
</main>
<footer th:replace="common/base::footer"></footer>
</body>
</html>